<template>
  <div class="order-good-card">
    <img :src="require('@/assets/image/default_img.png')"
         alt="" />
    <li class="good-top-info">
      <span class="text-overflow_2-xzh">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</span>
      <span>11111</span>
    </li>
    <li class="order-good-right"
        v-if="rightShow">
      <span>¥58.00</span>
      <span>x1</span>
    </li>
  </div>
</template>

<script>
export default {
  props: {
    rightShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    };
  },
  created () { },
  methods: {}
}

</script>

<style lang='scss' scoped>
.order-good-card {
  width: 100%;
  height: 1.32rem;
  display: flex;
  img {
    width: 1.32rem;
    height: 1.32rem;
  }
  .good-top-info {
    padding: 0.1rem 0 0 0.1rem;
    box-sizing: border-box;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    span {
      &:first-child {
        font-size: 0.26rem;
        color: #131415;
      }
      &:last-child {
        font-size: 0.24rem;
        color: #969696;
      }
    }
  }
  .order-good-right {
    display: flex;
    flex-direction: column;
    padding-top: 0.2rem;
    margin-left: 0.5rem;
    align-items: flex-end;
    > span {
      &:first-child {
        font-size: 0.26rem;
        font-weight: 600;
        color: #030303;
      }
      &:last-child {
        font-size: 0.2rem;
        color: #7e7e7e;
      }
    }
  }
}
</style>